<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>

  <div class="msg">
    <textarea></textarea>
    <a href="javascript:;" class="btn">发布</a>

    <div class="content">
      <!-- 这里放内容 -->

      <!-- <div class="item">
        <p>你好</p>
        <a href="javascript:;" class="del">删除</a>
      </div> -->

    </div>
  </div>

  <script src="./js/jquery-3.6.0.js"></script>
  <script>

    // 1. 找到发布按钮，注册单击事件 --> 组装一个 div.item ，放到 div.content 里面即可
    $('.btn').on('click', function () {
      // 获取输入框的值
      let val = $('textarea').val();
      // 创建div
      let div = $(`
      <div class="item">
        <p>${val}</p>
        <a href="javascript:;" class="del">删除</a>
      </div>
      `);
      $('.content').prepend(div); // 把创建好的div放到大盒子中
      $('textarea').val(''); // 清空输入框
    })


    // 2. 找到删除，注册单击事件(事件委托) --> 让透明度变化到0，然后删除当前元素
    $('.content').on('click', '.del', function () {
      // $(this) 表示 .del 元素，jQuery已经处理好了  ， $(this) 表示点击的那个元素
      $(this).parent().fadeOut(function () {
        // $(this) 表示使用动画效果的对象
        $(this).remove();
      });
    })

  </script>
</body>

</html>